
<template>
  <view>
    <view v-show="loading" class="card">
      <view>
        <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
      </view>
      <view style="margin-top: 100rpx;">
        <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
      </view>
      <view style="margin-top: 100rpx;">
        <nut-skeleton :width="`${statusBar.screenWidth - 50}px`" row="3" animated></nut-skeleton>
      </view>
    </view>
    <view v-show="!loading">
      <view class="sticky" style="background: #fff;padding: 10rpx 0">
      <view @click="visible = true" class="location">
        <view>{{ address[1] }}</view>
        <IconFont name="triangle-down" />
      </view>
      <view class="title">附近门店</view>
      </view>
      <view class="rect list">
        <view class="list-item" v-for="item in list" :key="item.id">
          <view class="list-item-title">
            <view>{{ item.men_dian_míngchēng }}</view>
<!--            <image src="../../images/location.png" style="width: 32rpx;height: 32rpx" />-->
          </view>
          <view class="list-item-time" @click="copyAddress(item)">
            <IconFont size="13" name="locationg3" />
            <view>{{ item.province }}{{ item.city }}{{ item.area }}{{ item.detail_address }}</view>
          </view>
          <view class="list-item-time">
            <IconFont size="13" name="clock" />
            <view> {{item.opening_time}}—{{ item.closing_time }}</view>
          </view>
          <view class="list-item-time" @click="callPhone(item)">
            <IconFont size="13" name="notice" />
            <view>{{ item.phone }}</view>
          </view>
        </view>
      </view>
      <view style="text-align: center;font-size: 28rpx;color:#999">没有更多了～</view>
    </view>
    <nut-cascader
        v-model:visible="visible"
        title="选择地址"
        v-model="address"
        text-key="label"
        :options="pcTextArr()"
        @change="cityChange"
    ></nut-cascader>
  </view>
</template>
<script setup>
import { ref } from "vue";
import Taro, {useReady, useLoad, useReachBottom, usePullDownRefresh} from '@tarojs/taro';
import request from "../../utils/request";
import { pcaTextArr } from "element-china-area-data";
import { deepClone } from "../../utils";
import QQMapWX from "../../utils/qqmap-wx-jssdk.min"

const qqmapsdk = new QQMapWX({
  key: 'EL2BZ-KT5CB-M2EUS-NJB4F-7DSTO-3HF5G'
});
// console.log(pcaTextArr)
const pcTextArr = () => {
  const copy = deepClone(pcaTextArr);
  copy.forEach(item => {
    if (item.children[0].label === "市辖区"){
      item.children[0].label = item.label;
      item.children[0].value = item.label;
    }
    item.children.forEach(itemItem => {
      itemItem.children = []
    })
  })
  return copy;
}
const statusBar = Taro.getSystemInfoSync();

const visible = ref(false);
const loading = ref(true);
const address = ref(["安徽省", "合肥市"])
const list = ref([]);
const page = ref(1);
const total = ref(0);
const getList = async () => {
  await Taro.showLoading({
    mask:true
  })
  const result = await request.get("/app-api/databoard/mini/pageMenDianGuanLiPages/pageList",{
    address:address.value[1],
    ditchId:99,
    pageNo:page.value,
  })
  list.value = list.value.concat(result.list);
  total.value = result.total;
  console.log(result.list)
  Taro.hideLoading();
  Taro.stopPullDownRefresh();
}
const cityChange = () => {
  list.value = [];
  page.value = 1;
  getList();
}
const copyAddress = (item) => {
  const address = `${ item.province }${ item.city }${ item.area }${ item.detail_address }`;
  Taro.setClipboardData({
    data:address
  })
}
const callPhone = (item) => {
  Taro.makePhoneCall({
    phoneNumber:item.phone
  })
}
usePullDownRefresh(() => {
  list.value = [];
  page.value = 1;
  Taro.getFuzzyLocation({
    type:"gcj02",
    success:res => {
      qqmapsdk.reverseGeocoder({
        location:`${res.latitude},${res.longitude}`,
        success:result => {
          const province = result.result.address_component.province;
          const city = result.result.address_component.city
          address.value = [province,city];
          getList();
        },
        fail:err => {
          console.log(err,"地址解析失败")
          Taro.showToast({
            title:"腾讯地图api调用失败",
            icon:"none"
          })
        }
      })
    },
    fail:err => {
      console.log(err,"定位api调用失败")
      Taro.showModal({
        title:"提示",
        content:"请打开位置权限",
        showCancel:false,
        success:() => {
          Taro.openSetting()
        }
      })
    }
  })
})
useReachBottom(() => {
  if (list.value.length < total.value) {
    page.value++;
    getList();
  }
})

useLoad(() => {
  // getList();
  Taro.getFuzzyLocation({
    type:"gcj02",
    success:res => {
      qqmapsdk.reverseGeocoder({
        location:`${res.latitude},${res.longitude}`,
        success:result => {
          const province = result.result.address_component.province;
          const city = result.result.address_component.city
          address.value = [province,city];
          getList();
        },
        fail:err => {
          console.log(err,"地址解析失败")
          Taro.showToast({
            title:"腾讯地图api调用失败",
            icon:"none"
          })
        }
      })
    },
    fail:err => {
      console.log(err,"定位api调用失败")
      Taro.showModal({
        title:"提示",
        content:"请打开位置权限",
        showCancel:false,
        success:() => {
          Taro.openSetting()
        }
      })
    }
  })
})

useReady(() => {
  // setTimeout(() => {
    loading.value = false;
  // },200)
})
</script>
<style>
.list-item-title,.list-item-time{
  display: flex;
  align-items: center;
}
.list-item-title{
  justify-content: space-between;
  margin-bottom: 40rpx;
}
.list-item-time{
  color: #5a5a5a;
  font-size: 28rpx;
  margin-bottom: 10rpx;
}
.list-item-time>view{
  margin-left: 6rpx;
}
.list-item+.list-item{
  margin-top:26rpx;
}
.list-item{
  border-radius: 20rpx;
  border: 2rpx solid #E2E2E2;
  padding: 26rpx;
  box-sizing: border-box;
}
.title{
  color: #333;
  font-size: 30rpx;
  font-weight: bolder;
  margin:36rpx 24rpx 20rpx 24rpx;
}
.location{
  width: 160rpx;
  height: 60rpx;
  background-color: #C1C1C1;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  color: white;
  margin: 24rpx;
}
</style>